<template>
  <Main :type="'form'">
    <Title :title="'权益设置'" />

    <el-row>
      <el-col :span="24">
        <el-form ref="form" label-width="120px" :model="form" :rules="rules">
          <el-form-item label="权益名称" prop="name">
            <el-input
              v-model="form.name"
              class="form-input"
              size="medium"
              placeholder="请输入权益名称"
              style="line-height: 20px;"
              maxlength="5"
              show-word-limit
            ></el-input>
          </el-form-item>

          <el-form-item label="权益图标" prop="file">
            <div class="commodityImage">
              <div class="icon">
                <div>
                  <img
                    v-if="form.file"
                    :src="
                      $store.state.qiniu + form.file + $store.state.imgRotate
                    "
                    alt=""
                  />
                </div>
              </div>
              <el-button type="primary" @click="dialogVisible = true"
                >选择图片</el-button
              >
            </div>
          </el-form-item>
          <el-form-item label="权益说明" prop="authority_explain">
            <el-input
              v-model="form.authority_explain"
              type="textarea"
              style="width:40%;"
              :autosize="{ minRows: 10, maxRows: 20 }"
              maxlength="500"
              show-word-limit
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <Footer>
      <el-button plain @click="$emit('out')">取 消</el-button>
      <el-button type="primary" @click="submit('save')">保 存</el-button>
    </Footer>

    <el-dialog title="选择图标" :visible.sync="dialogVisible" width="40%">
      <div class="imgList-box">
        <div
          v-for="(item, index) in imgList"
          :key="index"
          :style="item.check ? 'border-color:#409EFF' : ''"
          class="imgList-chlid"
          @click.stop="imgTap(item)"
        >
          <div class="imgList-chlid-img">
            <img
              :src="
                $store.state.qiniu + item.file_path + $store.state.imgRotate
              "
              width="100%"
              height="100%"
            />
          </div>
          <div class="imgList-chlid-name">
            {{ item.file_name }}
          </div>
        </div>
      </div>
      <el-pagination
        :page-size="18"
        layout="prev, pager, next"
        :total="totals"
        style="margin-top:20px;text-align: center;"
        @current-change="changes"
      >
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button plain @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click.stop="imgSumbit">确 定</el-button>
      </span>
    </el-dialog>
  </Main>
</template>
<script>
import { SETAUTHORITY, GETAUTHORITYICON } from "../service";
export default {
  props: {
    authorityId: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      dialogVisible: false,
      totals: 0,
      pages: 1,
      imgList: [],
      form: {
        name: "",
        file: "",
        file_xcx_path: "",
        authority_explain: ""
      },
      rules: {
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        file: [{ required: true, message: "请选择图片", trigger: "blur" }],
        authority_explain: [
          { required: true, message: "请输入说明", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.submit();
    this.getIcon();
  },
  methods: {
    imgTap(e) {
      this.imgList.forEach(ele => {
        if (e.file_id !== ele.file_id) {
          ele.check = false;
        } else {
          ele.check = true;
        }
      });
    },
    changes(page) {
      this.pages = page;
      this.getIcon();
    },
    imgSumbit() {
      let list = this.imgList.filter(item => {
        return item.check === true;
      });
      this.form.file = list[0].file_path;
      this.form.file_xcx_path = list[0].file_xcx_path;
      this.dialogVisible = false;
    },
    async getIcon() {
      await GETAUTHORITYICON({ page: this.pages, pageshow: 18 }).then(res => {
        let { code, data, msg } = res;
        if (code === 200) {
          this.imgList = data.list;
          this.totals = data.count;
        } else {
          this.$message.error(msg);
        }
      });
    },
    async submit(flag) {
      if (flag === "save") {
        await this.$refs["form"].validate(valid => {
          if (valid) {
            SETAUTHORITY({
              authority_id: this.authorityId,
              name: this.form.name,
              file: this.form.file,
              file_xcx_path: this.form.file_xcx_path,
              authority_explain: this.form.authority_explain,
              flag
            }).then(res => {
              let { code, msg } = res;
              if (code === 200) {
                this.$emit("out");
              }
              this.$message({
                message: msg,
                type: code === 200 ? "success" : "error"
              });
            });
          } else {
            return false;
          }
        });
      } else {
        await SETAUTHORITY({
          authority_id: this.authorityId
        }).then(res => {
          let { code, data, msg } = res;
          if (code === 200) {
            if (data != null) {
              this.form.name = data.name;
              this.form.file = data.pic;
              this.form.file_xcx_path = data.pic_xcx;
              this.form.authority_explain = data.authority_explain;
            }
          } else {
            this.$message.error(msg);
          }
        });
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.commodityImage {
  .icon {
    width: 80px;
    height: 80px;
    border-radius: 6px;
    display: block;
    float: left;
    margin-right: 10px;
    overflow: hidden;
    border: 1px solid #ccc;
    background-color: #fff;
    img {
      width: 100%;
      height: 100%;
    }
  }
  input {
    float: left;
  }
}
.imgList-box {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  padding-left: 10px;
  width: 100%;
  height: 380px;
  .imgList-chlid {
    width: 15%;
    height: 110px;
    background: #ffffff;
    border: 1px solid #e2e2e2;
    border-radius: 6px;
    margin: 10px 10px 0 0;
    .imgList-chlid-img {
      width: 70px;
      height: 70px;
      margin: 6px auto;
    }
    .imgList-chlid-name {
      width: 100%;
      height: 40px;
      text-align: center;
    }
  }
}
</style>
